<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view>
		<!-- 导航 -->
		<view>
			<my-scroll-navbar @TagIndex="onnav" :list="navValue" :isNav="false" :isIcon="false"></my-scroll-navbar>
			<my-scroll-navbar @TagIndex="onyurt" :list="yurtValue" :isNav="false" :isIcon="false"></my-scroll-navbar>
			<my-scroll-navbar @TagIndex="ontags" :list="tagsValue" :isNav="false" :isIcon="false"></my-scroll-navbar>
			<my-scroll-navbar @TagIndex="onyear" :list="yearValue" :isNav="false" :isIcon="false"></my-scroll-navbar>
		</view>
		<!-- 骨架屏 -->
		<view style="padding-top: 30rpx;" >
			<SkeletonScreen  v-if="loadings" PercentagePostion="static" :heightPercentage="'80vh'"></SkeletonScreen>
		</view>

		<view class="image-eight-Three">
			<my-img-y-Three class="item" v-for="item in videos" :images="item?.collection[0]?.imageUrl"
				:tags="item?.collection[0]?.tags" :name="item?.collection[0]?.name" :bifen="item?.collection[0]?.bifen"
				:biao="item?.collection[0]?.biao" :episode="item?.collection[0]?.episode"
				:episodes="item?.collection[0]?.episodes" :urlId="item?.collection[0]?.id"></my-img-y-Three>
		</view>
	</view>
	
	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view>... مەزمۇن تۈگىدى </view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		CollectionTags,
		CollectionYear,
		CollectionYurt,
		CollectionNav,
		videolist
	} from '@/API/tagsApis.js';
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	const loading = ref(true)
	const loadings = ref(false)
	const tagsValue = ref([])
	const yearValue = ref([])
	const yurtValue = ref([])
	const navValue = ref([])

	const tagsIndex = ref(0)
	const yearIndex = ref(null)
	const yurtIndex = ref(0)
	const navIndex = ref(0)
	const nextPage = ref(1);
	const videos = ref([]);

	// 获取个参数内容
	const tagsFunction = async () => {
		let tags = await CollectionTags();
		let year = await CollectionYear();
		let yurt = await CollectionYurt();
		let nav = await CollectionNav();
		tagsValue.value = tags;
		yearValue.value = year;
		yurtValue.value = yurt;
		navValue.value = nav;

	}
	// 获取个参数内容
	tagsFunction();

	const videosFunction = async (pageNum, sortId, type, yurt, year) => {
		try {
			let res = await videolist(pageNum, sortId, type, yurt, year);
			console.log("videos response:", res);

			if (!res || !res.list) {
				console.warn("Invalid response format or no list found.");
				return;
			}

			// 创建一个 Set 来记录已存在的 id
			const existingIds = new Set(videos.value.map(item => item.id));

			// 过滤 res.list，只添加 id 不存在于 existingIds 中的项
			const newItems = res.list.filter(item => !existingIds.has(item.id));

			// 合并更新
			videos.value = [...videos.value, ...newItems];
			nextPage.value = res.nextPage;

			// 调试信息
			console.log("Existing IDs:", Array.from(existingIds));
			console.log("New Items:", newItems);
			console.log("Updated Videos:", videos.value);
			loading.value = false
			loadings.value = false
		} catch (error) {
			console.error("Error fetching videos:", error);
		}
	};

	videosFunction(nextPage.value, tagsIndex.value, navIndex.value, yurtIndex.value, yearIndex.value);

	// 按返回的index值分别类型和显示相关的标签
	const onnav = (e) => {
		loadings.value = true
		console.log("nav：", e.index);
		navIndex.value = e.index;
		console.log("nav:")
		nextPage.value = 1;
		videos.value = [];
		videosFunction(nextPage.value, tagsIndex.value, e.index, yurtIndex.value, yearIndex.value);
	}
	const onyurt = (e) => {
		loadings.value = true
		console.log("yurt：", e.item.typeId);
		yurtIndex.value = e.item.typeId;
		nextPage.value = 1;
		videos.value = [];
		videosFunction(nextPage.value, tagsIndex.value, navIndex.value, e.item.typeId, yearIndex.value);
	}
	const ontags = (e) => {
		loadings.value = true
		console.log("tags：", e.item.sortId);
		tagsIndex.value = e.item.sortId;
		nextPage.value = 1;
		videos.value = [];
		videosFunction(nextPage.value, e.item.sortId, navIndex.value, yurtIndex.value, yearIndex.value);
	}
	const onyear = (e) => {
		loadings.value = true
		console.log("year：", e.item.name);
		yearIndex.value = e.item.name;
		nextPage.value = 1;
		videos.value = [];
		videosFunction(nextPage.value, tagsIndex.value, navIndex.value, yurtIndex.value, e.item.name);
	}
	// 触底刷新
	onReachBottom(() => {
		console.log("触底了")
		console.log("nextPage", nextPage.value);
		if (nextPage.value > 0) {
			videosFunction(nextPage.value, tagsIndex.value, navIndex.value, yurtIndex.value, yearIndex.value);
		}
	});
</script>

<style lang="scss" scoped>
	.image-eight-Three {
		direction: rtl;
		padding: 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);

		.item {
			overflow: hidden;
			/* 防止内容溢出 */
			position: relative;
			width: 100%;
			/* 图片宽度填充整个容器 */
			height: auto;
			/* 根据宽度自动调整高度 */
			display: block;
			/* 移除图片下方默认的空白间隙 */
			object-fit: cover;
			/* 保证图片完全覆盖容器，可能会裁剪图片 */
		}
	}
</style>